<template>
  <div>
    <dialogDiy :title="title" :titleCenter="true" ref="dialogDiy" @handleClose="closeDialog" DialogWidth="70%">
      <div style="
          max-height: 70vh;
          overflow-y: auto;
          height: 800px;
          padding: 0 20px;
        ">
        <el-table size="mini" v-loading="listloading" border :data="tableData.data">
          <el-table-column prop="id" width="60" align="center" label="方案Id"></el-table-column>
          <el-table-column prop="nickname" align="center" label="昵称"></el-table-column>
          <el-table-column prop="phone" align="center" label="手机号"></el-table-column>
          <el-table-column prop="registerTime" align="center" label="公司成立时间"></el-table-column>


          <el-table-column prop="creditCode" align="center" label="统一社会信用代码"></el-table-column>
          <el-table-column prop="enterpriseName" align="center" label="公司名称">
            <template slot-scope="scope">
              <span>{{ scope.row.enterpriseName || "-" }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="姓名">
            <template slot-scope="scope">
              <span>{{ scope.row.legalPerson || "-" }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="企业类型">
            <template slot-scope="scope">
              <span v-if="scope.row.matchType == 1">企业</span>
              <span v-if="scope.row.matchType == 2">个体工商户</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="联系方式" prop="phone"></el-table-column>
          <el-table-column align="center" label="匹配类型">
            <template slot-scope="scope">
              <span v-if="scope.row.matchStep == 0"> 答题匹配</span>
              <span v-if="scope.row.matchStep == 1"> 税务匹配</span>
              <span v-if="scope.row.matchStep == 2"> 征信匹配</span>
              <span v-if="scope.row.matchStep == 3"> 客服匹配</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="匹配状态">
            <template slot-scope="scope">
              <el-tag size="mini" :type="scope.row.listClass">{{
                scope.row.dictLabel
                }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="updateTime" label="记录更新时间"></el-table-column>
          <el-table-column align="center" prop="cusManage" label="客户经理"></el-table-column>
          <el-table-column align="center" label="征信录入">
            <template slot-scope="scope">
              <el-button v-if="scope.row.matchStep == 2" type="text" @click="conditionEntry(scope.row)">
                <span v-if="scope.row.entered == 0">{{ "未录入" }}</span>
                <span v-if="scope.row.entered == 1">{{ "编辑" }}</span>
              </el-button>
              <span v-if="scope.row.matchStep == 1">-</span>
              <el-button v-if="scope.row.matchStep == 2 && scope.row.entered == 3" type="text"
                @click="clickHandle(scope.row)">详情</el-button>
              <el-button v-if="scope.row.matchStep == 3" type="text" @click="clickHandle(scope.row)">详情</el-button>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="contactStatus" label="客服沟通">
            <template slot-scope="scope">
              <div @click="goCommunication(scope.row)">
                <el-button v-if="scope.row.contactStatus == '0'" type="text">未沟通</el-button>
                <el-button v-if="scope.row.contactStatus == '1'" type="text">沟通中</el-button>
                <el-button v-if="scope.row.contactStatus == '2'" type="text">沟通成功</el-button>
                <el-button v-if="scope.row.contactStatus == '3'" type="text">
                  -</el-button>
                <el-button v-if="scope.row.contactStatus == '4'" type="text">详情</el-button>
              </div>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="createTime" label="记录创建时间"></el-table-column>
          <el-table-column align="center" label="操作">
            <template slot-scope="scope">
              <el-button type="text" @click="detail(scope.row)">详情</el-button>
              <el-button v-if="
                scope.row.matchStatus == 14 || scope.row.matchStatus == 15
              " type="text" v-btnpermission="$btnPer.customerMatchBtnrules.developPlan"
                @click="match(scope.row)">出额度</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination class="pageRight" background @size-change="handleSizeChange"
          @current-change="handleCurrentChange" :page-sizes="[10, 20, 30, 40]" :current-page="searchForm.pageNum"
          :page-size="searchForm.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="tableData.total">
        </el-pagination>
      </div>
    </dialogDiy>

    <el-dialog :key="dialogKey" :visible.sync="dialogVisible" width="80%" :append-to-body="true" @closed="closeDetail">
      <div style="
          max-height: 70vh;
          overflow-y: auto;
          height: 800px;
          padding: 0 20px;
        ">
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane v-if="!isQuestion" label="基本信息" name="first">
            <transition name="el-fade-in">
              <basic-info v-if="activeName == 'first'" :detailInfo="detailInfo"></basic-info>
            </transition>
          </el-tab-pane>

          <el-tab-pane v-if="type == 1 && !isQuestion" label="纳税信息" name="second">
            <transition name="el-fade-in">
              <tax-information v-if="activeName == 'second'" :detailInfo="detailInfo"></tax-information>
            </transition>
          </el-tab-pane>

          <el-tab-pane v-if="type == 1 && !isQuestion" label="开票信息" name="third">
            <transition name="el-fade-in">
              <invoice-information v-if="activeName == 'third'" :detailInfo="detailInfo"></invoice-information>
            </transition>
          </el-tab-pane>
          <el-tab-pane label="工商司法信息" name="four">
            <transition name="el-fade-in">
              <business-judicial-information v-if="activeName == 'four'"
                :detailInfo="detailInfo"></business-judicial-information>
            </transition>
          </el-tab-pane>

          <el-tab-pane label="征信信息" name="five">
            <credit-information v-if="activeName == 'five'" :creditInformation="detailInfo"
              :detailInfo="detailInfo"></credit-information>
          </el-tab-pane>

          <el-tab-pane label="客服沟通" name="six">
            <cummun-dialog v-if="activeName == 'six'" :creditInformation="detailInfo"
              :detailInfo="detailInfo"></cummun-dialog>
          </el-tab-pane>

          <el-tab-pane label="方案信息" name="seven">
            <develop-plan v-if="activeName == 'seven'" :searchType="1" :creditInformation="detailInfo"
              :detailInfo="detailInfo"></develop-plan>
          </el-tab-pane>

          <el-tab-pane label="答题信息" name="eight">
            <answerdata v-if="activeName == 'eight'" :detailInfo="detailInfo"></answerdata>
          </el-tab-pane>
        </el-tabs>
      </div>
    </el-dialog>


    <dialog-diy ref="dialogDiytaxRef" title="详情" style="" @handleClose="closeDialogTax">
      <div style="
          max-height: 70vh;
          overflow-y: auto;
          height: 800px;
          padding: 0 20px;
        ">
        <credit-information :creditInformation="detailInfo" :detailInfo="detailInfo"></credit-information>
      </div>
    </dialog-diy>
  </div>
</template>

<script>
import dialogDiy from "../../../../components/dialogDiy/index.vue";
import { getMatchRecordList, updateCutomerManager } from "@/api/customer";
import basicInfo from "./basicInfo.vue";
import taxInformation from "./taxInformation.vue";
import invoiceInformation from "./invoiceInformation.vue";
import businessJudicialInformation from "./businessJudicialInformation.vue";
import creditInformation from "./creditInformation.vue";
import cummunDialog from "./cummunDialog.vue";
import developPlan from "./developPlan.vue";
import answerdata from "./answerData.vue";
export default {
  components: {
    dialogDiy,
    basicInfo,
    taxInformation,
    invoiceInformation,
    businessJudicialInformation,
    creditInformation,
    cummunDialog,
    developPlan,
    answerdata
  },
  props: {
    matchStatusList: {
      type: Array,
      default: () => {
        return [];
      }
    },
  },
  data() {
    return {
      searchForm: {
        pageNum: 1,
        pageSize: 10
      },
      tableData: {
        data: [],
        total: 0
      },
      creditCode: "",
      listloading: false,
      detailInfo: {},
      dialogVisible: false,
      activeName: "first",
      isQuestion: false,
      type: null,
      title: "客户详情",
      dialogKey: 0
    };
  },
  methods: {
    closeDetail() {
      this.activeName = "first";
      this.dialogVisible = false;

    },
    closeDialogTax() {
      this.detailInfo = {};
      this.$refs.dialogDiytaxRef.handleClose();
    },
    goCommunication(val) {
      if (val.contactStatus !== "3") {
        this.$router.push({
          name: "communication",
          query: val
        });
      }
    },
    conditionEntry(row) {
      this.$router.push({
        path: "/conditionEntry",
        query: {
          id: row.id,
          machType: row.matchType,
          canpamyName: row.enterpriseName
        }
      });
    },
    clickHandle(v) {
      this.detailInfo = v;
      this.$refs.dialogDiytaxRef.openlog();
    },



    match(row) {
      if (row.matchStep == 2) {
        this.$router.push({
          path: "/customerMatchDetail",
          query: {
            data: JSON.stringify(row),
            type: 1
          }
        });
      }
      if (row.matchStep == 3) {
        this.$router.push({
          path: "/creditLimitInfor",
          query: row
        });
      }
    },
    handleClick() { },
    detail(v) {
      this.dialogVisible = true;
      this.dialogKey++
      this.isQuestion = v.question;
      this.detailInfo = v;
      this.type = v.matchType;
      this.$nextTick(() => {
        if (this.isQuestion) {
          this.activeName = "four";
        }
      });
    },
    statusfun(v) {
      const obj = this.matchStatusList.find(item => item.value === v);
      return obj;
    },
    handleSizeChange(val) {
      this.searchForm.pageSize = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.searchForm.pageNum = val;
      this.getList();
    },
    getList() {
      let params = {
        ...this.searchForm,
        creditCode: this.creditCode
      };
      getMatchRecordList(params).then(res => {
        res.data.list.forEach(v => {
          v.dictLabel = this.statusfun(v.matchStatus).dictLabel;
          v.listClass = this.statusfun(v.matchStatus).listClass;
        });
        this.tableData.data = res.data.list;
        this.tableData.total = res.data.total;
      });
    },
    openlog(v) {
      console.log(v);

      this.searchForm['matchType'] = v.matchType
      this.title = v.enterpriseName
      this.creditCode = v.creditCode;
      this.getList();
      this.$refs.dialogDiy.openlog();
    },
    closeDialog() {
      this.searchForm.pageNum = 1;
      //   this.$refs.dialogDiy.handleClose();
    }
  }
};
</script>

<style></style>
